<template>
    <view style="display: flex;flex-direction: column;align-items: center;">

        <view v-for="(item,index) in noteObj.list" class="articleContainer" :key="index" @click="gotoNoteDetail(item.id)">
            <view class="left">
                <view class="title text-2line-ellipsis">
                    {{item.title}}
                </view>
                <view class="bottom">
                    <text :class="{pass:(item.reviewStatus!=0)}">{{item.pageViews||"0"}}次阅读</text>
                    
                    <text style="margin-left: 30rpx;margin-right: 30rpx;">{{item.createTime}}</text>
                    <view v-if="item.reviewStatus==0" class="checking">
                        审核中
                    </view>
                    
<!--                    <button @click.stop="" v-else style="padding: 0;margin: 0;border: none;" class="shareBtn" 
                        :data-id="item.id" 
                        :data-type="'article'"
                        :data-sharepath="'/pages/client/article/articleDetail?id='+item.id" plain="true" type="default"
                        open-type="share">
                        <view class="container">
                            <image class="icon" src="../../static/image/icon_sharebtn.png" mode=""></image>
                        </view>
                    </button> -->

                </view>
            </view>
            <image class="right" :src="item.cover" mode="scaleToFill"></image>
            
        </view>
        <view class="" style="height: 200rpx;">
            
        </view>     
    </view>
</template>

<script>
    import {
        mapState,
        mapMutations,
        mapActions
    } from 'vuex';
    
    let that = null
    const api = require("@/static/js/api.js")
    const utils = require("@/static/js/utils.js")

    export default {

        computed: {
            ...mapState({
                hasLogin: state => state.userInfo.hasLogin,
                isAuthUserInfo: state => state.userInfo.isAuthUserInfo,
                isAuthPhone: state => state.userInfo.isAuthPhone,
                isSeller: state => state.userInfo.isSeller,
                avatarUrl: state => state.userInfo.avatarUrl,
                nickName: state => state.userInfo.nickName,
                telephone: state => state.userInfo.telephone,
                openId: state => state.userInfo.openId,
                employeeId: state => state.userInfo.employeeId,
            }),
        },
        
        data() {
            return {              
                noteObj: {
                    list: [],
                    loadStatus: "loading",
                    pageIndex: 1,
					curPageIndex: 0,
                },
            };
        },

        onLoad(options) {
            that = this;
        },
        onShow() {
            that.clearListShow(that.noteObj)
            that.getProjectNotes()
        },
   
        
        onReachBottom() {
            that.getArticleList()
        },
        
        methods: {
          
            gotoNoteDetail(id){
                uni.navigateTo({
                    url: "./myNoteDetail?id="+id
                })
            },


            getProjectNotes() {
				if (that.noteObj.curPageIndex != that.noteObj.pageIndex){
					that.noteObj.curPageIndex = that.noteObj.pageIndex
					api.getProjectNotes({
					    param: {
					        limit: 5,
					        page: that.noteObj.pageIndex,
					        title: that.articleSearchTitle, 
					    }
					}).then(res => {
					    console.log(res)
					    if (res.code==0) {
					        that.pushListShow(that.noteObj, res.data)
					    }
					})
				}
   
            },


            /**
             * @description: 列表中添加数据
             * @param {number} id   u-tabs-swiper的当前ID
             * @param {list}  列表
             * @return void
             */
            pushListShow(srcObj, pushlist) {
                if (pushlist && pushlist.length > 0) {
                    for (let i = 0; i < pushlist.length; i++) {
                        pushlist[i].createTime = utils.formatTime(pushlist[i].createTime, 'yyyy-MM-dd')
                        srcObj.list.push(pushlist[i])
                    }
                    srcObj.pageIndex++;

                    if (pushlist.length == 10) {
                        srcObj.loadStatus = "loadmore"
                    } else {
                        srcObj.loadStatus = "nomore"
                    }
                } else {
                    srcObj.loadStatus = "nomore"
                }
            },

            //----清空列表
            clearListShow(srcObj) {
				srcObj.curPageIndex = 0;
                srcObj.pageIndex = 1;
                srcObj.list.splice(0, srcObj.list.length)
            },

        }
    }
</script>

<style>
    page {
        background-color: #f3f3f3;
    }
</style>
<style lang="scss">
	.tabContainer{
		width: 750rpx;
		background-color: #FFFFFF;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		position: fixed;
		top: 0;
		left: 0;
		border-bottom: solid #F3F3F3 1px;
		z-index: 99999;
	}
	
    .articleType {
        width: 453rpx;
        height: 68rpx;
        border-radius: 15rpx;
        border: solid 2rpx #349dee;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30rpx;
        line-height: 68rpx;
        margin-left: 178rpx;

        .wrapper {
            width: 227rpx;
            height: 68rpx;
            overflow: hidden;
            line-height: 68rpx;
            text-align: center;
        }

        .enableLeft {
            border-radius: 15rpx 0rpx 0rpx 15rpx;
            background-color: #349dee;
            color: #FFFFFF;
        }

        .disableLeft {
            // background-color: #FFFFFF;
            color: #349dee;
        }

        .enableRight {
            border-radius: 0rpx 15rpx 15rpx 0rpx;
            background-color: #349dee;
            color: #FFFFFF;
        }

        .disableRight {
            // background-color: #FFFFFF;
            color: #349dee;
        }
    }

    .articleContainer {
        width: 714rpx;
        height: 213rpx;
        background: #FFFFFF;
        box-shadow: 2rpx 2rpx 2rpx 1rpx #FFFFFF;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30rpx;
        margin-top: 30rpx;
        
        .left{
            width: 454rpx;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .title{
                width: 420rpx;
                font-size: 30rpx;
                color: #515151;
                line-height: 42rpx
            }
            .bottom{
                width: 100%;
                font-size: 24rpx;
                color: #999999;
                line-height: 33rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .shareBtn {
                    border: none;
                    padding: 0;
                    margin: 0;
                    // width: 36rpx;
                    // height: 36rpx;               
                    .container {
                        display: flex;
                        justify-content: center;
                        align-items: center;
						width: 100rpx;
						height: 60rpx;
                        // margin-right: 34rpx; 
                        .icon{
                           width: 36rpx;
                           height: 36rpx;
                        }
                    }           
                }
                .pass{
                    color: #666666;
                }
                .checking{
                    width: 88rpx;
                    height: 40rpx;
                    font-size: 24rpx;
                    color: #999999;
                    line-height: 40rpx;
                    text-align: center;
                    background: #F4F4F4;
                    border-radius: 8px;
                }
            }
            
        }
        .right{
            width: 184rpx;
            height: 132rpx;
            border-radius: 20rpx;
        }
    }

    .addArticle {
        position: fixed;
        right: 30rpx;
        bottom: 124rpx;
        width: 108rpx;
        height: 108rpx;
    }

    .pageEnd {
        height: 22rpx;
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #b5b5b5;
        margin-top: 160rpx;
        margin-bottom: 80rpx;

        .line {
            width: 118rpx;
            height: 1px;
            background-color: #cccccc;
            margin-left: 10rpx;
            margin-right: 10rpx;
        }
    }
    
    .popupContainer {       
        width: 600rpx;
        // height: 364rpx;
        background: #FFFFFF;
        border-radius: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-bottom: 70rpx;
        .input{
            box-sizing: border-box;
            width: 500rpx;
            height: 92rpx;
            border-radius: 46rpx;
            border: 1rpx solid #979797;
            padding: 0 40rpx;
        }
        .btn{
            width: 458rpx;
            height: 92rpx;
            background: #5E9FFD;
            border-radius: 46rpx;
            margin-top: 48rpx;
            font-size: 30rpx;
            color: #FFFFFF;
            text-align: center;
            line-height: 92rpx;
        }
    }
    
    
    .bottomContainer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 750rpx;
        height: 122rpx;
        background: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top: #F3F3F3 1px solid;
    
        .container {
            width: 600rpx;
            height: 74rpx;
            background: #5E9FFD;
            border-radius: 37rpx;
            font-size: 28rpx;
            color: #FFFFFF;
            display: flex;
            justify-content: center;
            align-items: center;
            .icon {
                width: 40rpx;
                height: 40rpx;
                margin-right: 15rpx;
            }
        }
    }
</style>
